<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_state</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
  /*
  需求: 自定义组件, 功能说明如下
    1. 显示h2标题, 初始文本为: 你喜欢我
    2. 点击标题更新为: 我喜欢你

    在react里面，我们只需要操作state，也就是状态

    其中 state是组件对象最重要的
  */

  // 1、定义组件
  class Like extends React.Component {

    // 构造器，在里面设置初始值
    constructor(props) {
      super(props);

      this.state = {
        isLikeMe: false
      }

      // 将新增方法中的this强制绑定为组件对象
      this.handleClick = this.handleClick.bind(this)
    }

    // 新添加的方法，内部的this，默认不是组件对象，而是undefined
    handleClick() {

      //注意，这里的this 是 null

      //更新状态
      this.setState({
        isLikeMe: !this.state.isLikeMe
      })
    }

    // 重写组件类的方法
    render() {
      //读取状态
      // const isLikeMe = this.state.isLikeMe;
      // Es6语法，结构赋值
      const {isLikeMe} = this.state;

      return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>

    }
  }
  // 2、渲染组件
  ReactDOM.render(<Like/>, document.getElementById('example'));
</script>
</body>
</html>

